<template>
    <div class="tabs-wrapper">
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane v-for="item in data" :key="item.key" :tab="item.title">
                <Search :style="{width: '100%'}" :placeholder="item.placeholder" />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup lang="ts">
import Search from "@/components/Search/Search.vue";
import {ref} from "vue";
const data = [
    {
        title: "私聊消息",
        key: "private",
        placeholder: "好友昵称/手机号/备注",
    },
    {
        title: "群聊消息",
        key: "group",
        placeholder: "群名称",
    },
];
const activeKey = ref(data[0].key);
</script>

<style scoped lang="less">
.tabs-wrapper {
    padding: 0 12px;
    border-bottom: 1px solid #e8e8e8;
    :deep(.ant-tabs-content-holder) {
        padding-bottom: 16px;
    }
}
</style>
